<template>
    <Menu :theme="theme2" :open-names="['1']" accordion width="120" class="over" :style="{height:tableHeight+'px'}" 
    @on-select="handleSelect" @on-open-change="handleOPenChange">
        <Submenu name="1">
            <template slot="title">
                <span>工厂计划(达成率)</span>
            </template>
            <Submenu :name="item.id" v-for="item of planYearList" :key="item.id" >
                <template slot="title">{{item.name}}</template>
                <MenuItem :name="items.id" v-for="items of item.planMonths" :key="items.id"  >{{items.name}}</MenuItem>
            </Submenu>
        </Submenu>
    </Menu>
</template>
<script>
    export default {
        props:{
            planYearList:Array
        },
        data () {
            return {
                theme2: 'light' 
            }
        },
        methods:{
            handleSelect(name){
                this.$emit('handleSelect',name)
            },
            handleOPenChange(name){
                 // if(name.length>1){
                 //   this.$emit('handleOPenChange',name[1])
                 // }  
            }
 
        },
        computed: {
            tableHeight() {
                const filterHeight = 0
                var tableHeight = this.getTableHeight(filterHeight)+28
                return tableHeight+40;
            }
        }
    }
</script>
<style scoped>
    .over{
        overflow:auto;
        border:1px solid #409eff;
    }
    li.ivu-menu-item{
        padding:15px!important;
    }
    .right{
        float: right;
        color:green;
    }
</style>